<template>
  <div class="shop">
    <!-- 头部导航 -->
    <van-sticky>
      <LoginHeader>
        <div class='shop_title'>值得买</div>
      </LoginHeader>
    </van-sticky>
    <!-- 导航区 -->
    <div class="nav_container">
      <!-- 底图 -->
      <img class="nav_img" src="./image/back.jpg" alt="">
      <!-- 标题区域 -->
      <div class="title flex">
        <!-- 值得买图片 -->
        <img class="worth_img" src="./image/shouldbuy.png" alt="">
        <div class="text">严选好物用心生活</div>
      </div>
      <!-- 轮播导航区 -->
      <div class="swiper_container">
        <van-swipe class="swiper_list" indicator-color="white" :loop="false" :width="88.75">
          <van-swipe-item class="swiper_item" v-for="(item, index) in navList.filter((itemA, indexA) => indexA <= 6) "
            :key="item.id">
            <a class="outer" :href="item.columnUrl" style="text-decoration: none; color:#333">
              <div class="inner">
                <img class="swiper_img" :src="item.picUrl" alt="">
                <div class="swiper_title">{{ item.mainTitle }}</div>
                <div class="swiper_text">{{ item.viceTitle }}</div>
              </div>
              <div class="inner">
                <img class="swiper_img" :src="navList[index + 7].picUrl" alt="">
                <div class="swiper_title">{{ index <= 6 && navList[index + 7].mainTitle }}</div>
                    <div class="swiper_text">{{ index <= 6 && navList[index + 7].viceTitle }}</div>
                    </div>
            </a>
          </van-swipe-item>
          <template #indicator="{ active, total }">
            <div class="custom-indicator">
              <i :class="{
                swipeIndicator: true,
                active: active === (index < 3 ? index : 3)
              }" v-for="(item, index) in (total > 4 ? total - 3 : 0)">
              </i>
            </div>
          </template>
        </van-swipe>
      </div>
    </div>

    <!-- 内容区 -->
    <div class="content_container">
      <div class="content_list flex">
        <van-list class="content_item" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <div style="margin-bottom: 10px;" v-for="item in topicsList1" :key="item.topicId"
            @click="jumpHandle(uul + item.schemeUrl)">
            <img :src="item.picUrl" alt="" class="content_img">
            <div class="content_title">{{ item.title }}</div>
            <div class="content_text flex">
              <div class="content_text_top flex">
                <img :src="item.avatar" class="content_text_img">
                <div class="content_text_info">{{ item.nickname }}</div>
              </div>

              <div class="content_price_container">
                <img class="content_price_img" src="./image/see.png">
                <div class="content_price">{{ (item.readCount / 100).toFixed(0) }}k</div>
              </div>
            </div>
          </div>
        </van-list>
        <van-list class="content_item" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <div style="margin-bottom: 10px;" v-for="item in topicsList2" :key="item.topicId"
            @click="jumpHandle(uul + item.schemeUrl)">
            <img :src="item.picUrl" class="content_img">
            <div class="content_title">{{ item.title }}</div>
            <div class="content_text flex">
              <div class="content_text_top flex">
                <img :src="item.avatar" alt="" class="content_text_img">
                <div class="content_text_info">{{ item.nickname }}</div>
              </div>

              <div class="content_price_container">
                <img class="content_price_img" src="./image/see.png">
                <div class="content_price">{{ (item.readCount / 100).toFixed(0) }}k</div>
              </div>
            </div>
          </div>
        </van-list>
      </div>
    </div>

    <Tabbar></Tabbar>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getNavList, type NavListModel, getContent, type TopicModel } from '../../api/worthbuy'
//声明响应式数据
const navList = ref<NavListModel[]>([])
const topicsList1 = ref<TopicModel[]>([])
const topicsList2 = ref<TopicModel[]>([])
const uul = 'https://m.you.163.com'
const pages = {
  page: 1,
  limit: 2,
}
const loading = ref(false);
const finished = ref(false);
let flag = true
// 生命周期函数
onMounted(() => {
  getNavListData()
  getContentList()
})
// 事件的回调
const onLoad = () => {
  if (flag) {
    pages.page++
    getContentList()

  }
}
//点击内容区域跳转路径
const jumpHandle = (url: string) => {
  window.location.href = url
}
// 自定义事件的功能函数
//轮播图数据
async function getNavListData() {
  try {
    let result = await getNavList()
    navList.value = result.navList
  } catch (err) {
    console.log(err);
  }
}
//瀑布流数据
async function getContentList() {
  if (flag) {
    try {
      flag = false
      let res = await getContent(pages.page, pages.limit)
      topicsList1.value.push(...res.result[0].topics)
      topicsList2.value.push(...res.result[1].topics)
      flag = true
    } catch (err) {
      console.log(err);
    }
  }
}


</script>

<style lang="less">
.shop {
  width: 375px;
  height: 100%;
  background-color: #eee;

  //头部导航
  .shop_title {
    width: 100%;
    height: 5px;
    text-align: center;
    font-size: 18px;
    color: #000;
  }

  // 导航区域
  .nav_container {
    height: 343px;
    position: relative;
    background-color: #eee;

    .nav_img {
      height: 259px;
      width: 100%;
    }

    .title {
      position: absolute;
      top: 30px;
      left: 10px;

      .worth_img {
        width: 65px;
        height: 34px;
      }

      .text {
        font-size: 15px;
        color: white;
        height: 22px;
        line-height: 22px;
        padding-top: 10px;

      }
    }

    // 轮播
    .swiper_container {
      background-color: #fff;
      width: 355px;
      height: 270px;
      position: absolute;
      top: 74px;
      left: 10px;
      border-radius: 8px;

      .swiper_list {
        width: 355px;
        height: 270px;

        .swiper_item {
          text-align: center;

          .outer {
            text-align: center;

            .inner {
              margin-top: 12px;

              .swiper_img {
                width: 60px;
                height: 60px;
              }

              .swiper_title {
                font-size: 14px;
              }

              .swiper_text {
                font-size: 12px;
                color: #999;
              }
            }
          }

        }
      }

    }

  }

  // 内容区
  .content_container {
    .content_list {
      flex-wrap: wrap;
      justify-content: space-between;
      width: 355px;
      margin: 0 10px;

      .content_item {
        width: 172.5px;
        margin-top: 10px;
        margin-bottom: 20px;

        .content_img {
          width: 172.5px;
          vertical-align: bottom;
          border-top-left-radius: 10px;
          border-top-right-radius: 10px;
        }
      }

      .content_title {
        font-size: 14px;
        padding: 10px 5px;
        color: #333;
        background-color: white;

      }

      .content_text {
        background-color: white;
        font-size: 14px;
        color: #ccc;
        justify-content: space-between;
        padding: 0px 5px;
        padding-bottom: 20px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;

        .content_text_top {
          .content_text_img {
            width: 24px;
            border-radius: 50%;
          }

          .content_text_info {
            margin-left: 5px;
            line-height: 24px;
          }
        }

        .content_price_container {
          display: flex;
          height: 24px;
          line-height: 24px;

          .content_price_img {
            margin: auto;
            width: 16px;
            height: 16px;
          }
        }
      }
    }
  }

}

//轮播图指示器样式
:deep(.van-swipe-item) {
  height: 250px;
}

.custom-indicator {
  width: max-content;
  height: 2px;
  display: flex;
  background-color: #eee;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 15px;
  margin: auto;
}

.swipeIndicator {
  width: 20px;
  height: 1.5px;
  background-color: #eee;
}

i.active {
  background-color: #dd1a21;
}

.flex {
  display: flex;
}

.flex_c {
  display: flex;
  flex-direction: column;
}
</style>
